<!DOCTYPE html>
<html>
<head>
    <title>Modifying onDataRequest event</title>
    <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="../common/samples.css">
</head>
<body>
<div class='header_comment'>Dynamic loading: modifying onDataRequest event</div>
<div id="testA" style='width:250px; height:250px; float:left'></div>

<script type="text/javascript" charset="utf-8">

    webix.ready(function(){
        webix.ui({
            container:"testA",
            view:"tree",
            data:[
                {id:1, value:"Layout Branch", webix_kids:true},
                {id:2, value:"Data Branch", webix_kids:true},
                {id:6, value:"Calendar"}
            ],
            on: {
                onDataRequest: function (id) {
                    webix.message("Getting children of " + id);
                    this.parse(
                            webix.ajax().get("data/data_dyn_json.php?parent="+id).then(function (data) {
                                return data = data.json();
                            })
                    );
                    return false;
                }
            }
        });

    });
</script>
</body>
</html>